<template>
    <div ref="player_ref">
        <div :id="player_id"></div>
    </div>

</template>

<script>
    import {toRefs} from 'vue'
    import generator_player from "@/components/LivePlayer/composables/generator_player";
    import player_resize from "@/components/LivePlayer/composables/player_resize";
    import bind_event, {event_list} from "@/components/LivePlayer/composables/bind_event";

    export default {
        name: "player",
        emits: [...event_list, 'update:player'],//event_list是播放器对象订阅的数据
        props: {
            vid: {
                type: String,
                required: true
            },
            play_auth: {
                type: String,
                default: null
            },
            player: {
                default: null
            },
            wh_ratio: {
                type: Number,
                default: 1920 / 1080
            }
        },
        setup(props, ctx) {
            const {vid, play_auth, wh_ratio} = toRefs(props)
            const {player, player_id} = generator_player(vid, play_auth, ctx)//生成播放器对象，以及player_id
            const {player_ref} = player_resize(player, wh_ratio)//浏览器缩放时适配播放器比例
            bind_event(player, ctx)//给播放器对象订阅事件，并将事件emit给父组件
            return {
                player,
                player_ref,
                player_id
            }
        }
    }
</script>

<style>
    .prism-controlbar{
        display: block !important;
    }
</style>
